<template>
    <view :data-theme="globPrimary">
        <u-navbar title="收货地址" :custom-back="onBack"></u-navbar>
        <mescroll-body
            ref="mescrollRef"
            :height="mescrollHeight"
            @init="mescrollInit"
            @down="downCallback"
            @up="getData"
        >
            <u-radio-group :value="value" @change="handleDefaultChange">
                <view class="item" v-for="item in addressList" :key="item.id">
                    <view class="top" @click="handleClickItem(item)">
                        <view class="u-flex">
                            <view class="name">{{ item.consignee }}</view>
                            <view class="phone">{{ item.phone }}</view>
                        </view>
                        <view class="text">{{ item.areatext }} {{ item.address }}</view>
                    </view>
                    <view class="u-flex bottom u-border-top">
                        <u-radio :name="item.id" :active-color="globPrimaryColor"
                            >设为默认地址</u-radio
                        >
                        <view class="u-flex btn">
                            <edu-button
                                type="primary"
                                shape="circle"
                                plain
                                @click.stop="handleDeleteChange(item.id)"
                                >删除</edu-button
                            >
                            <edu-button
                                type="primary"
                                shape="circle"
                                @click.stop="toAmendSite(item)"
                                >修改</edu-button
                            >
                        </view>
                    </view>
                </view>
            </u-radio-group>
        </mescroll-body>
        <view class="address-bottom-placeholder safe-area-inset-bottom"></view>
        <view class="address-bottom u-flex safe-area-inset-bottom">
            <edu-button class="btn" type="primary" shape="circle" size="medium" @click="toAddSite"
                >新建收货地址</edu-button
            >
        </view>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'
export default {
    mixins: [MescrollMixin],
    data() {
        return {
            addressList: [],
            value: 0,
            options: {},
        }
    },
    computed: {
        ...mapGetters({
            globPrimary: 'designSetting/getGlobTheme',
            globPrimaryColor: 'designSetting/getGlobThemeColor',
            globNavbarHeight: 'projectSetting/globNavbarHeight',
            globStatusBarHeight: 'projectSetting/globStatusBarHeight',
        }),
        mescrollHeight() {
            let windowHeight = this.$u.sys().windowHeight
            let height = windowHeight - this.globNavbarHeight - this.globStatusBarHeight - 85
            return `${height}px`
        },
    },
    options: { styleIsolation: 'shared' },
    // 监听页面返回
    onBackPress(options) {
        if (options.from === 'navigateBack') {
            return false
        }
        this.onBack()
        return true
    },
    onLoad(options) {
        this.options = options
    },
    onShow() {
        this.mescroll && this.mescroll.resetUpScroll()
    },
    methods: {
        // 获取列表数据
        getData() {
            this.$edu.api.getMallAddressList().then((res) => {
                const { data } = res
                let list = data
                this.addressList = list
                this.mescroll.endSuccess(list.length)
                let val = list.find((item) => item.default == 1)
                this.value = 0
                if (val) {
                    this.value = val.id
                }
            })
        },
        // 处理默认变化时
        handleDefaultChange(e) {
            this.$edu.api
                .putMallAddressDefault({
                    id: e,
                    default: e == this.value ? 0 : 1,
                })
                .then((res) => {
                    this.getData()
                    this.$u.toast(res.msg)
                })
        },
        // 添加新地址
        toAddSite() {
            this.$u.route('pageUser/address/add')
        },
        // 修改地址
        toAmendSite(item) {
            let params = {
                id: item.id,
                consignee: item.consignee,
                phone: item.phone,
                areacode: item.areacode,
                areatext: item.areatext,
                address: item.address,
                default: item.default,
            }
            let query = {
                address: JSON.stringify(params),
            }
            // 修改确认订单页面的地址时实时更新过去
            if (!this.$u.test.empty(this.options.address)) {
                query.id = this.options.address
            }
            this.$u.route('pageUser/address/add', query)
        },
        // 选择地址
        handleClickItem(item) {
            if (!this.$u.test.empty(this.options)) {
                let params = {
                    id: item.id,
                    consignee: item.consignee,
                    phone: item.phone,
                    areacode: item.areacode,
                    areatext: item.areatext,
                    address: item.address,
                }
                // 更新订单页面的地址信息
                uni.$emit('chooseAddress', JSON.stringify(params))
                this.$u.route({ type: 'back' })
            }
        },
        // 删除地址时
        handleDeleteChange(id) {
            let _this = this
            uni.showModal({
                content: '确认删除地址吗?',
                confirmColor: _this.globPrimaryColor,
                success: (res) => {
                    if (res.confirm) {
                        _this.$edu.api
                            .deleteMallAddress({
                                id: id,
                            })
                            .then((res) => {
                                _this.$u.toast(res.msg)
                                setTimeout(() => {
                                    _this.mescroll.resetUpScroll()
                                }, 100)
                                // 删除时如果订单页面的地址，更新为空
                                if (_this.options.address == id) {
                                    let params = {}
                                    uni.$emit('chooseAddress', JSON.stringify(params))
                                }
                            })
                    }
                },
            })
        },
        // 返回上一页
        onBack() {
            let pages = getCurrentPages()
            let page = pages[pages.length - 2]
            if (this.$u.test.empty(page)) {
                this.$u.route({ type: 'switchTab', url: 'pages/user/index' })
            } else {
                this.$u.route({ type: 'back' })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.u-radio-group {
    display: block;
}
.item {
    padding: 0 24rpx;
    margin: 20rpx 30rpx 0;
    background: #ffffff;
    border-radius: 8rpx;
    .top {
        padding: 26rpx 0 32rpx;
    }
    .name {
        font-size: 30rpx;
        font-weight: 500;
        color: $edu-main-color;
    }
    .phone {
        font-size: 30rpx;
        font-weight: 400;
        color: $edu-main-color;
    }
    .text {
        margin-top: 26rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: $edu-content-color;
        line-height: 40rpx;
    }
    .bottom {
        padding: 31rpx 0 36rpx;
    }
    .btn {
        margin-left: auto;
        ::v-deep .edu-btn {
            width: 140rpx;
            height: 56rpx !important;
            line-height: 56rpx !important;
            margin-left: 24rpx;
            margin-right: 0;
        }
    }
}
.address-bottom-placeholder {
    width: 100%;
    height: 98rpx;
    box-sizing: content-box;
}
.address-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 98rpx;
    padding-left: 55rpx;
    padding-right: 55rpx;
    background-color: #fff;
    box-shadow: 0px 2rpx 14rpx 0px rgba(0, 0, 0, 0.06);
    box-sizing: content-box;
    .btn {
        width: 100%;
    }
    ::v-deep .edu-size-medium {
        width: 100%;
    }
}
</style>
